@-webkit-keyframes mymove
{
from {top:0px;}
to {top:230px;}
}
@keyframes mymove
{
from {top:0px;}
to {top:230px;}
}
@-moz-keyframes mymove
{
from {top:0px;}
to {top:230px;}
}
#IndexList .fixed{
    position: fixed;
    animation:mymove 2s normal;
    -webkit-animation:mymove 2s normal;
    -moz-animation:mymove 2s normal;
    -ms-animation:mymove 2s normal;
}
.IndexList{
    width:700px;
	padding:17px 0 33px;
	.IndexListType{
       width:661px;
       top:0;
       z-index:3;
       height: 15px;
       padding:17px 19px;
       border-bottom: 1px solid #e6e7eb;
       background:#fff;
       .TypeTag{
       	height: 15px;
       	line-height:15px;
       	width: 540px;
       	ul{
            height: 20px;
       		margin-top:-5px
       	}
       	li{
       		float: left;
       		min-width:55px;
       		margin-right:20px;
       		height: 20px;
       		line-height:20px;
       		padding-bottom:15px;
            border-bottom:4px solid #0099e5;
       	}
       }
	}
	.IndexListCont{
       width:100%;
       height:auto;
       li{
         position: relative;
         min-height:72px;
         padding:30px 19px;
         border-bottom: 1px solid #e6e7eb; 
         &::before{
		    content: '';
		    position: absolute;
		    top: 0;
		    left: 0;
		    width: 0%;
		    height: 100%;
		    z-index: 0;
		    opacity: 0;
		    background-color: rgba(164, 168, 195, 0.5);
		    -webkit-transition: all 0.8s;
		    -moz-transition: all 0.8s;
		    -o-transition: all 0.8s;
		    transition: all 0.8s;
		}
		&:hover::before{
		    // opacity: 0.2;
		    // width: 100%;
		}
         .Jitems{
         	position:relative;
         	height: auto;
         	width: 100%;
         	z-index: 1;
         }
         .Jitems-Title{
         	width:100%;
         	height: 30px;
         	a,i{
         		display: inline-block;
         	}
         	a{
         		max-width:520px;
         		overflow:hidden;
         		text-overflow: ellipsis;
         		white-space: nowrap;
         		font-size: 16px;
         		color:#585858;
         		text-align: left;
         		margin-right: 5px;
                &:hover{
                    //text-decoration: underline;
                    color:#00aaff;
                }
         	}
         }
         .Jitems-Name{
            height: 40px;
            line-height: 40px;
            width: 100%;
            margin-bottom: 15px;
            .Indexlist_join , .Indexlist_ujoin{
                width: 62px;
                height: 26px;
                line-height: 26px;
                font-size: 12px;
                color: rgb(88, 88, 88);
                border: 1px solid rgb(234, 236, 239);
                background-color: rgba(40, 215, 250, 0);
            }
            .Indexlist_join{
                color: #fff;
                background: #00aaff;
                border-color: #00aaff;
                img{
                    margin-right:5px;
                }
            }
            .Indexlist_ujoin{
               span:first-child{
                display: inline-block;
               }
               span:last-child{
                display: none;
               }
               &:hover{
                span:first-child{
                  display: none;
                }
                span:last-child{
                  display: inline-block;
                }
               }
            }
            .qzicon{
                width: 40px;
                height: 40px;
                border-radius:50%;
                overflow: hidden;
                margin-right:15px;
            }
            .Qzname{
                font-size: 14px;
                color: rgb(64, 64, 64);
                font-weight: bold;
                margin-right:15px;
                &:hover{
                    color:#0099e5
                }
            }
         }
         .Jitems-Detail{
         	width:100%;
         	min-height: 27px;
         	margin-bottom: 10px;
         	.Jitems-Detail-text{
         		font-size: 14px;
         		color: rgb(167, 167, 167);
         		max-height: 30px;
         		max-width:100%;
         		overflow:hidden;
         		text-overflow: ellipsis;
         		white-space: nowrap;
                line-height: 24px;
                p{
                    font-size: 14px !important;
                    color: rgb(167, 167, 167) !important;
                }
         	}
         	.Jitems-Detail-img{
                position:relative;
         		width:100%;
                .JDICont{
                    position: relative;
                    z-index: 4;
                    max-height: 110px;
                    width:100%;
                    overflow: hidden;
                }
         	}
            .imgList{
                position:relative;
                display: inline-block;
                max-width:156px;
                text-align: left;
                height: 110px;
                overflow:hidden;
                margin-right:10px;
                .imgfd{
                    position:absolute;
                    top:0;
                    left:0;
                    display: none;
                    width: 100%;
                    height: 100%;
                    background:rgba(0,0,0,0) url(../../images/icon-max.png) no-repeat center;
                }
                &:hover .imgfd{
                    display: inline-block;
                }
                img{
                    display: inline-block;
                    cursor: -webkit-zoom-in;
                    cursor: zoom-in;
                    max-height: 100%;
                    //max-width:100%;
                }
            }
         }
         .Jitems-Info{
         	width:100%;
         	height:20px;
         	.JuserInfo{
         		min-width:160px;
         		max-width: 400px;
         		a{
         			display: inline-block;
         			position: relative;
         			line-height:20px;
         			font-size: 12px;
         			color: rgb(102, 102, 102);
         		}
         		img{
         			position: relative;
         			top:4px;
     				display: inline;
     				width:20px;
     				height:20px;
     				border-radius:50%;
         		}
         		.JuserInfo-time{
         			font-size: 12px;
         			color: rgb(167, 167, 167);
         			border-left:1px solid rgb(238, 238, 238);
         			margin-left:5px;
         			padding-left:10px;
         		}
         	}
         	.JdataInfo{
         		display: inline-block;
         		height: 20px;
         		line-height: 20px;
         		font-size: 12px;
         		color: rgb(167, 167, 167);
         		margin-top:4px;
         		span{
         			margin-right:20px;
         			img{
         				margin-right:5px;
         			}
         		}
         	}
         }
       }
	}
    .Jlist-thumb{
        // display: none;
        position:relative;
        margin-top:-110px;
        width: 632px;
        min-height:100px;
        padding: 10px;
        background: #f7f7f7;
        border: 1px solid #e4e6eb;
        z-index:5;
        cursor: normal;
        .thumbHd{
            height: 25px;
            width:100%;
            border-bottom:1px solid #e4e6eb;
            text-align: left;
            a{ 
                float: left;
                font-size: 12px;
                color: #2d64b3;
                text-align: left;
                box-sizing:content-box;
                i{  
                    display: inline-block;
                    position:relative;
                    top:-1px;
                    width: 20px;
                    height: 20px;
                    vertical-align: middle;
                    background:url(../../images/thread_list_z_eca48fe.png);
                    background-position: 0px -30px;
                }
            }
        }
        .thumbWarp{
            position:relative;
            width:632px;
            height: 90%;
            padding: 1% 0;
            margin-top:10px;
            text-align: center;
            display: table-cell;
            vertical-align: middle;
            -moz-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
            user-select: none;
            img{
                display: inline-block;
                max-width: 100%;
                cursor: -webkit-zoom-out;
                cursor: zoom-out;
            }
            .thumbsx{
                position:absolute;
                top:0;
                left:0;
                width: 100%;
                height: 100%;
                z-index: 5;
                &:hover{
                 cursor: normal;
                 background:rgba(0,0,0,0.05) url(../../images/icon-mini.png) no-repeat center;
                }
            }
            .thumbWarpList{
                position:relative;
                margin-top:10px;
                overflow:hidden;
                width:632px;
            }
            .thumbNext,
            .thumbPrev{
                position:absolute;
                top:0;
                width:20%;
                height: 100%;
                cursor: pointer;
                z-index: 6;
            }
            .thumbPrev{
               left:0; 
               &:hover{
                 background:rgba(0,0,0,0.01) url(../../images/icon-left.png) no-repeat center; 
               }
            }
            .thumbNext{
               right: 0;
               &:hover{
                background:rgba(0,0,0,0.01) url(../../images/icon-right.png) no-repeat center;
               }
            }
        }
    }
}
.selectMask{
    position:fixed;
    width: 100%;
    height:100%;
    top:0;
    left:0;
    z-index: 100003;
}
.drownbox {
   width: 100%;
   margin:30px auto 0;
   height: 60px;
   text-align: center;
   span{
    width: 80px;
    height: 20px;
    line-height: 20px;
    display: inline-block;
    font-size: 14px;
    font-family: "Microsoft YaHei";
    color: rgb(128, 128, 128);
   }
}
.goDrown{
    cursor: pointer;
    padding-right:10px;
    background:url(../../images/icon18.png) no-repeat center right;
    &:hover{
      color:#0099fe;
      background:url(../../images/icon18_hover.png) no-repeat center right;
    }
}
.spinner8 {
  margin: 0 auto;
  width: 60px;
  height: 60px;
  position: relative;
}
.container1 > div, .container2 > div, .container3 > div {
  width: 16px;
  height: 16px;
  background-color: #0099fe;
  border-radius: 100%;
  position: absolute;
  -webkit-animation: bouncedelay 1.2s infinite ease-in-out;
  animation: bouncedelay 1.2s infinite ease-in-out;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.spinner8 .spinner-container {
  position: absolute;
  width: 100%;
  height: 100%;
}
.container2 {
  -webkit-transform: rotateZ(45deg);
  transform: rotateZ(45deg);
}
.container3 {
  -webkit-transform: rotateZ(90deg);
  transform: rotateZ(90deg);
}
.circle1 { top: 0; left: 0; }
.circle2 { top: 0; right: 0; }
.circle3 { right: 0; bottom: 0; }
.circle4 { left: 0; bottom: 0; }
.container2 .circle1 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}
.container3 .circle1 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}
.container1 .circle2 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}
.container2 .circle2 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}
.container3 .circle2 {
  -webkit-animation-delay: -0.7s;
  animation-delay: -0.7s;
}
.container1 .circle3 {
  -webkit-animation-delay: -0.6s;
  animation-delay: -0.6s;
}
.container2 .circle3 {
  -webkit-animation-delay: -0.5s;
  animation-delay: -0.5s;
}
.container3 .circle3 {
  -webkit-animation-delay: -0.4s;
  animation-delay: -0.4s;
}
.container1 .circle4 {
  -webkit-animation-delay: -0.3s;
  animation-delay: -0.3s;
}
.container2 .circle4 {
  -webkit-animation-delay: -0.2s;
  animation-delay: -0.2s;
}
.container3 .circle4 {
  -webkit-animation-delay: -0.1s;
  animation-delay: -0.1s;
}
@-webkit-keyframes bouncedelay {
  0%, 80%, 100% { -webkit-transform: scale(0.0) }
  40% { -webkit-transform: scale(1.0) }
}

@keyframes bouncedelay {
  0%, 80%, 100% { 
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  } 40% { 
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
  }
}